<template>
    <div class="admin-top">
        <div class="admin-top-sousou">
            <span>
                <el-icon>
                    <Search />
                </el-icon>
                筛选搜索
            </span>
            <div>
                <el-button @click="remove">重置</el-button>
                <el-button type="primary" @click="onSearch">查询搜索</el-button>
            </div>
        </div>
        <div class="admin-bom">
            <span>
                账号/姓名:
            </span>
            <el-input type="text" placeholder="请输入用户名" v-model="name"></el-input>
        </div>

    </div>
    <div class="admim-nav">
        <div>
            <el-icon>
                <Tickets />
            </el-icon>
            <span>
                数据列表
            </span>
        </div>
        <div>
            <el-button type="primary" @click="addrole">添加</el-button>
        </div>
    </div>
    <el-table :data="tableData" border>
        <el-table-column prop="id" label="编号" width="60" height="40"></el-table-column>
        <el-table-column prop="name" label="角色名称" width="200" height="40"></el-table-column>
        <el-table-column prop="description" label="描述" width="200" height="40"></el-table-column>
        <el-table-column prop="adminCount" label="用户数" width="180" height="40"></el-table-column>
        <el-table-column prop="id" label="添加时间" width="180" height="40">
            <template #default="scope">
                <div>
                    {{ scope.row.createTime ? dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '/' }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="是否启用" width="180" height="40">
            <template #default="scope">
                <el-switch @click="updateStatusFn(scope.row)" :value="scope.row.status === 1 ? true : false" />
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180" height="40">
            <template #default="scope">
                <el-button link @click="fenpei(scope.row.id)">分配菜单</el-button>
                <el-button link @click="resources(scope.row.id)">分配资源</el-button>
                <el-button link @click="addrole(scope.row)">编辑</el-button>
            </template>

        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
        :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <addRole :visible="visible" :form="form" @getValue="getValuefn"></addRole>
</template>

<script setup lang="ts">
import * as api from '../../request/api'
import useTable from '../../hooks/useTables'
import dayjs from 'dayjs'
import { ref, reactive } from 'vue'
import addRole from './addRole.vue'
import type { Ref } from 'vue'
import { Role } from '../../request/QmsAdminConreiller/index'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
let router = useRouter()
//搜索绑定值
let name = ref("")
//显示隐藏
let visible = ref(false)
let form: any = ref() as Ref<Role>

let { tableData, getTableData, pagination } = useTable(api.admin.getrole, {
    keyword: name
})
getTableData()
const handleSizeChange = (val: number) => {
    getTableData()
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    // console.log(`current page: ${val}`)
}
//搜索按钮
let onSearch = async () => {
    getTableData()
}
//重置按钮
let remove = () => {
    name.value = ''
}
//添加角色
let addrole = async (val: any) => {
    console.log(val);
    form.value = val
    // tableData.value.forEach(item => {
    //     if (item.id == val) {
    //         return form.value = item
    //     }
    // })
    console.log(form);

    visible.value = true
}
//显示
const getValuefn = (e: any) => {
    console.log(e)
    visible.value = e
}
//分配菜单
const fenpei = (id: string) => {
    // let res = await api.admin.addrole(form.value.id)
    // console.log(res);
    router.push(
        { path: '/ums/allocMenu', query: { id } }
    )

}
//分配资源
const resources = (id: string) => {
    // let res = await api.admin.addrole(form.value.id)
    // console.log(res);
    router.push(
        { path: '/ums/allocResource', query: { id } }
    )

}
//是否显示
let updateStatusFn = async (row: any) => {
    ElMessageBox.confirm(
        '是否要修改该状态?', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            console.log(row);
            // console.log(row.id);
            // console.log(row.status);
            let query = reactive({
                id: row.id,
                status: row.status == 1 ? 0 : 1
            })
            // console.log(query1);

            let newQuery = JSON.parse(JSON.stringify(query))
            console.log(newQuery);

            await api.admin.getRoleEnable(newQuery)
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
</script>

<style lang="scss" scoped>
.admin-top {
    width: 96%;
    height: 90px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 60px;
    margin-bottom: 20px;

    .admin-top-sousou {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            .el-icon {
                padding-right: 10px;
            }
        }

        .el-button {
            margin-left: 20px;
        }

    }

}

.admin-bom {
    padding-left: 50px;

    .el-input {
        width: 200px;
    }
}

.admim-nav {
    width: 96%;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .example-pagination-block {
        margin-top: 10px;
        float: right;
    }

}
</style>